<template>
    <div class="footer">
        <div class="center">
            <div class="company">
                <p class="company-name">厦门指尖互动文化传播有限公司<span></span></p>
                <p class="url">www.xmfinger.com</p>
            </div>
            <div class="contact">
                <div class="business">
                    <div class="business-words">
                        <span></span>
                        <p>商务合作</p>
                    </div>
                    <p>钟先生</p>
                    <div class="contact-information">
                        <div class="phone">
                            <span></span>
                            <a href="tel:13806036507">13806036507</a>
                        </div>
                        <div class="QQ">
                            <span></span>
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=2770020&site=qq&menu=yes">2770020</a>
                        </div>
                    </div>
                </div>
                <div class="channel">
                    <div class="channel-words">
                        <span></span>
                        <p>渠道合作</p>
                    </div>
                    <p>朱女士</p>
                    <div class="contact-information">
                        <div class="phone">
                            <span></span>
                            <a href="tel:13959193414">13959193414</a>
                        </div>
                        <div class="QQ">
                            <span></span>
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=526302576&site=qq&menu=yes">526302576</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="qr-code">
                <img src="../../../assets/img/footer-qr-code.png" alt="">
            </div>
            <div class="address">
                <p>厦门市软件园3期A区01栋1301单元</p>
                <div>
                    <p>Copyright © 2016-2018 指尖互动 All Rights Reserved | </p>
                    <a href="http://www.miitbeian.gov.cn/" target="_blank">闽ICP备16031728号-1</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Footer',
    data () {
        return {

        }
    }
}
</script>
<style scoped>
.footer {
    width: 100%;
    height: 300px;
    margin-top: 100px;
    background-color: #1e90ff;
    padding-top: 15px;
}
.footer .center {
    width: 710px;
    height: 190px;
    margin: 0 auto;
    position: relative;
}
.footer .center .company .company-name {
    font-size: 30px; /*px*/
    color: #fff;
    position: relative;
}
.footer .center .company .company-name span {
    display: inline-block;
    width: 185px;
    border-bottom: 1px solid #fff; /*no*/
    position: absolute;
    bottom: -3px;
    left: 0;
}
.footer .center .company .url {
    font-size: 20px;
    color: #fff;
    margin-top: 6px;
}
.footer .center .contact {
    width:420px;
    margin-top: 17px;
    color: #fff;
    height: 114px;
}
.footer .center .contact .business {
    float: left;
}
.footer .center .contact .business .business-words,.footer .center .contact .channel .channel-words {
    display: flex;
}
.footer .center .contact .business .business-words span,.footer .center .contact .channel .channel-words span {
    display: inline-block;
    width: 5px;
    height: 22px;
    background-color: #fff;
}
.footer .center .contact .business .business-words p,.footer .center .contact .channel .channel-words p {
    font-size: 20px; /*px*/
    color: #fff;
    display: inline-block;
    margin-left: 6px;
    padding-top: 3px;
}
.footer .center .contact .business>p,.footer .center .contact .channel>p {
    font-size: 20px;  /*px*/
    margin-top: 10px;
    margin-left: 12px;
}
.footer .center .contact .contact-information {
    margin-top: 10px;
    margin-left: 12px;
}
.footer .center .contact .contact-information .phone {
    display: flex;
}
.footer .center .contact .contact-information .phone span {
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url("../../../assets/img/phone.png") no-repeat;
    background-size: 19px 19px;
}
.footer .center .contact .contact-information .phone a {
    font-size: 20px; /*px*/
    margin-left: 3px;
    text-decoration: none;
    color: #fff;
}
.footer .center .contact .contact-information .QQ {
    display: flex;
    margin-top: 10px;
}
.footer .center .contact .contact-information .QQ span {
    display: inline-block;
    width: 18px;
    height: 19px;
    background: url("../../../assets/img/QQ.png") no-repeat;
    background-size:18px 19px;
}
.footer .center .contact .contact-information .QQ a {
    font-size: 20px;
    color: #fff;
    margin-left: 6px;
    text-decoration: none;
    margin-top: 3px;
}
.footer .center .contact .channel {
    float: right;
}
.footer .center .qr-code {
    width: 190px;
    height: 190px;
    position: absolute;
    top: 0;
    right: 0;
}
.footer .center .qr-code img {
    width: 100%;
    height: auto;
}
.footer .center .address {
    margin-top: 34px;
    text-align: center;
    color: #fff;
}
.footer .center .address>p {
    font-size: 18px; /*px*/
}
.footer .center .address div {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.footer .center .address div p {
    font-size: 16px; /*px*/
    display: inline-block;
}
.footer .center .address div a {
    font-size: 16px; /*px*/
    color: #fff;
    text-decoration: none;
}
</style>
